:root {
    --bg-color3: #ffffff;
    --bg-color: #ffffff;
    --block-padding-mini: 10px;
    --block-padding-small: 15px;
    --block-padding-big: 25px;
    --block-padding-huge: 55px;
    --block-padding-top: 16px;
    --block-padding-top-big: 25px;
    --text-color-light: #6941c6;
    --text-color-primary: #6941c6;
    --text-color-fouse: #6941c6;
    --border-color: #7f56d9;
    --main-color: #7f56d9;
    --van-button-primary-background: linear-gradient(to right, #7f56d9, #7f56d9);
    --van-button-primary-border-color: #7f56d9;
    --van-button-primary-color: #fff;
    --van-cell-background: var(--bg-color3);
    --van-cell-value-color: #999999;
    --van-cell-horizontal-padding: 16px;
    --van-field-error-message-color: var(--text-color-fouse);
    --van-field-border-color: #7f56d9;

    --van-checkbox-checked-icon-color: #7f56d9;
    --border-color: #7f56d9;


    --van-checkbox-border-color: #d0d5dd;
    --van-gray-6: #344054;


    // 首页底部激活后的状态
    --van-tabbar-item-active-color: #7f56d9;
    --van-tabbar-item-text-color: #344054;
    --van-tabbar-height: 60px;

    // header左颜色
    --van-nav-bar-icon-color: #7f56d9;
    --van-tabs-bottom-bar-color: #7f56d9;

    // switch
    --van-primary-color: #7f56d9;
}

#nprogress {
    .bar {
        background: var(--main-color);

    }

    .spinner {
        top: 40%;
        left: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        transform: translateX(-50%);
    }

    .spinner-icon {
        border-top-color: var(--main-color);
        border-left-color: var(--main-color);
    }
}


html {
    font-size: 16px;
    min-height: 100%;
}

body a,
html a {
    text-decoration: none;
}

body {
    background: var(--bg-color3) !important;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}

body {
    margin: 0px;
}

h1,
h2,
h3,
h4,
h5 {
    margin-block-start: 0;
    margin-block-end: 0;
}

input {
    border: none;
}

input:-internal-autofill-selected {
    // -webkit-text-fill-color: #fff !important;
    background-color: var(--bg-color) !important;
    background-image: none !important;
    transition: var(--bg-color) 5000s ease-in-out 0s !important;
    box-shadow: 0 0 0 1000px var(--bg-color) inset;
}

h3 {
    font-size: 18px;
    font-weight: bold;
    padding: 5px 0;
}

.van-dialog__footer {
    .van-button {
        background: none;
    }

    .van-dialog__cancel {
        color: var(--van-gray-6)
    }

    .van-dialog__confirm {
        color: var(--text-color-fouse)
    }
}

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.block__title {
    padding-top: 20px;
    margin: 0;
    padding: 32px 16px 16px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}

.block__desc {
    padding: 2px 16px 2px;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}

.btn-padding {
    padding: 10px 0;
}

.text-bottom-activity {
    border-bottom: 2px solid var(--border-color);

    width: 100%;
}

.border-active {
    border: 1px solid transparent;
    border-image: var(--van-button-primary-background);
    border-image-slice: 1;
}

.text-color-light {
    color: var(--text-color-light);
    cursor: pointer;
}

.text-color-light0 {
    color: var(--text-color-light);
}

.text-color-light1 {
    color: #aaa2ff;
}

.text-color-light2 {
    color: #aaa2ff;
}

.text-color-light3 {
    color: #aaa2ff;
}

.text-color-light4 {
    color: #aaa2ff;
}

.text-color-light5 {
    color: #f8da4d;
}

.text-color-light6 {
    color: var(--text-color-fouse);
}

.text-color-gray {
    color: var(--van-gray-6);
}

.text-color-fouse {
    color: var(--text-color-fouse);
    cursor: pointer;
}

.text-color-plus {
    color: #f89d4d;
}

.text-color-sub {
    color: var(--text-color-fouse);
}

.text-color-primary {
    color: var(--text-color-primary);
}
.img {
    max-width: 100%;
}

.text-bold {
    font-weight: bold;
}

.text-small-font {
    font-size: 14px;
}

.text-mini-font {
    font-size: 12px;
}

.text-flex-center-align {
    display: flex;
    height: 100%;
    align-items: center;
}

.van-field {
    border: 1px solid;
    border-color: var(--van-field-border-color);
    margin: 16px 0;
    width: auto;
    border-radius: 8px;
    background-color: var(--bg-color2);
}

.van-button--default {
    color: var(--van-gray-6);
}

button.empty-background {
    background: transparent;
    border: none;
}

.van-field:after {
    border: none;
}

.button-primary {
    background: var(--van-button-primary-background);
    border-radius: 8px;
    font-size: 13px;
    padding: 1px 10px;
    color: var(--bg-color);
}

.button-default {
    background: #3b128f;
    border-radius: 8px;
    font-size: 13px;
    padding: 1px 10px;
    color: #7d769d;
}

.button-fouse {
    background: var(--text-color-fouse);
    border-radius: 8px;
    font-size: 13px;
    padding: 1px 10px;
    color: #fff;
}

.button-middle {
    padding: 14px 20px;
}

.padding-middle-v {
    padding: 0px 20px;
}

.padding-middle-h {
    padding: 20px 0px;
}

.space-bottom-small {
    margin-bottom: var(--block-padding-small);
}

.space-bottom-md {
    margin-bottom: var(--block-padding-top);
}

.space-top-mini {
    margin-top: var(--block-padding-mini);
}

.space-top-small {
    margin-top: var(--block-padding-small);
}

.space-top-md {
    margin-top: var(--block-padding-top);
}

.space-top-big {
    margin-top: var(--block-padding-big);
}

.space-top-huge {
    margin-top: var(--block-padding-huge);
}

.van-image__error,
.van-image__loading {
    background: transparent;
}

.van-nav-bar__left {
    padding: 0px;
}

.flex-100 {
    display: flex;
    width: 100%;
}

.flex-center {
    justify-content: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.width-40 {
    width: 40%;
}

.common-dialog {
    padding: 20px 10px;

    .common-dialog-desc {
        padding: 10px 15px 5px 15px;
        white-space: pre-line;
    }

    .common-dialog-btn-cancel {
        background: transparent;
        color: #04c9db;
        border: 1px solid #04c9db;
    }

    .dialog-button {
        margin: 40px 15px 15px;
        display: flex;
    }

    .van-button {
        padding: 5px 32px;
    }

    .dialog-buttons {
        margin: 40px 15px 15px;
        display: flex;
        justify-content: space-between;
    }

    .common-dialog-content {
        padding: 0px 15px;
    }
}

.paypass-row {
    padding: 10px 0px;

    .van-password-input__security {
        height: 42px;
    }

    .van-password-input {
        margin: 0;
    }

    .van-password-input__security li {
        background: var(--bg-color2);
        border-radius: 8px;
        color: #fff;
    }

    .van-password-input__security i {
        background-color: #fff;
    }
}

.van-number-keyboard {
    color: #000;
}

/* 登錄 */
.login {
    .welcome {
        padding: 20px 0 20px 0;
        text-align: center;
        font-size: 18px;
        color: #101828;
    }

    .header {
        padding: 20px var(--van-cell-horizontal-padding);
    }

    .login-remark {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        // padding: 0 var(--van-cell-horizontal-padding);
        font-size: var(--van-font-size-md);
        color: var(--van-gray-6);

        .van-checkbox__label {
            color: var(--van-gray-6);
        }

        .agree {
            display: flex;
            align-items: center;
        }

        .forget {
            display: flex;
            align-items: center;
        }
    }
}

/* 導航 */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left {
        display: flex;
    }

    .right {
        display: flex;

        .connect-wallet {
            padding: 0px 26px;
            color: #fff;
            background: var(--bg-color2);
            border: 1px solid #939393;
            font-size: var(--van-font-size-lg);
            margin: auto;
        }
    }

    .logo {
        height: 42px;
    }
}
.mt10 {
    margin-top: 10px;
}
.ml10 {
    margin-left: 10px;
}
.mr10 {
    margin-left: 10px;
}
.mb10 {
    margin-bottom: 10px;
}
.mt20 {
    margin-top: 20px;
}
.mb20 {
    margin-bottom: 20px;
}
.ml20 {
    margin-bottom: 20px;
}

.m420 {
    margin-bottom: 20px;
}
.group-container {
    margin: var(--block-padding-small) 0;
    padding: 10px;
    background: var(--bg-color2);
    border: 1px solid var(--border-color);
    border-radius: 8px;

    input {
        width: 100%;
    }

    .group-btn-container {
        display: flex;
        margin-top: 10px;

        .group-btn {
            padding: 6px 18px;
            background: transparent;
            border-radius: 12px;
            border: 1px solid #1d67a1;
            font-size: 14px;

            img {
                width: 16px;
                padding: 0 2px;
            }
        }
    }
}

.row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.group-container {
    .van-cell-group {
        background: var(--bg-color2);
    }

    .van-cell {
        font-size: 16px;
        padding: var(--van-cell-vertical-padding) 0;

        img {
            width: 20px;
            height: 20px;
            padding: 2px 10px 4px 4px;
        }
    }

    .van-cell:after {
        border-bottom: none;
    }

    .van-hairline--top-bottom:after {
        border-width: 0;
    }
}

.padding-round-small {
    padding: var(--block-padding-mini);
    border-radius: 10px;
}

.home {
    .home-swipe-outside {
        margin: 24px 0 18px;
        background: var(--van-button-primary-background);
        border-radius: 18px;
        display: flex;
    }

    .home-swipe {
        margin: 1px 1px;
        height: 8rem;
        width: 100%;
        border-radius: 18px;
        text-align: center;
        background: var(--bg-color);
    }

    .notice-swipe {
        height: 40px;
        line-height: 40px;
    }

    .period-button {
        padding: var(--van-button-small-padding);
        height: var(--van-button-mini-height);
    }

    .activite-period {
        color: var(--van-tabs-bottom-bar-color);
        border: 1px solid var(--van-tabs-bottom-bar-color);
    }

    .van-card {
        padding: 0
    }

}


.app-tabs .van-cell__value {
    text-align: left;
}



.van-tabbar {
    // max-width: 500px;
    // left: 50%;
    // transform: translate(-50%, -50%);
}

.register {
    color: #475467;
    text-align: center;
    font-size: 13px;
}

.login-class {
    margin: 30px 0;
}


.logo {
    padding-top: 20px;
    text-align: center;

    img {
        display: inline-block;
        width: 60px;
        height: 60ox;
        border-radius: 50%;
    }
}

.app-container {
    max-width: 500px;
    margin: 0 auto;

}

.app-padding {
    padding: 10px 20px;
}

// .app-container {
//     height: calc(100vh - 60px);
//     overflow-x: hidden;
//     overflow-y: auto;
//     overflow: overlay;
// }
// .app-home {
//     max-width: 500px;
//     margin: 0 auto;
//     height: 100vh;
// }


.usercenter {
    display: flex;
    flex-direction: column;
}

.van-nav-bar {

    background-color: var(--main-color)!important;
    .van-nav-bar__left {
        margin-left: 10px;
        color: #fff;
    }
    .van-nav-bar__title,.van-icon {
        color: #fff!important;
    }

}

.main-color {
    color: var(--main-color);
}





.h5-container {
    padding: 16px;
    padding-bottom: 40px;
    .h5-title {
        font-size: 18px;
        font-weight: 600;
    }
    .h5-time {
        color: #999;
        margin-top: 16px;
    }
    .h5-desc {
        margin-top: 16px;
    }
    .h5-question {
        margin-top: 32px;
        font-weight: 600;
        font-size: 16px;
    }

    .h5-answer {
        margin-top: 16px;
        font-size: 14px;

    }


}
.kefu {
    margin-top: 30px;
    font-weight: 600;
    font-size: 16px;
}

.container-pad {
    padding: 0 16px;
}



// 策略
.strategy-info {
    .van-swipe-item {
        padding-right: 10px;
        box-sizing: border-box;
    
        .swipe-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 20px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid #a9a9a9;
            background: transparent;
            color: #a9a9a9;
    
            &.select {
                background: var(--main-color);
                border-color: var(--main-color);
                color: #fff;
            }
        } 
    
    }
    .h5-desc {
        font-size: 14px;
        line-height: 20px;
        color: #a9a9a9;
    }
    .filter-item {
        margin-top: 10px;
        &.bi-list span {
            padding: 0 16px;
            border-radius: 12px;
            height: 24px;
            line-height: 22px;
            font-size: 13px;
            margin-right: 10px;
            display: inline-block;
            font-size: 12px;
    
            border: 1px solid #a9a9a9;
            background: transparent;
            color: #a9a9a9;
            &.select {
                background: var(--main-color);
                border-color: var(--main-color);
                color: #fff;
            }
            
        }
        
    } 


    .van-pull-refresh__track {
        max-height: 800px;
    }
}

.center {
    text-align: center;
}





.vip-container {
    margin: 10px 0;
    background: #b0b0b0;
    height: 70px;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;


    .icon-vip {
        color: #f5bb1b;
    }
    .vip-content {
        color: #fff;
        flex: 1;

        .vip-top {
            display: flex;
            align-items: center;

            .vip-text {
                font-size: 20px;
                font-weight: 600;
                font-style: italic;
                margin-left:4px;
            }
            .vip-little {
                font-size: 13px;
                font-weight: 500;
            }
            
        }
        .vip-tip {
            font-size: 13px;
        }

    }
    .btn-vip-container {
        position: relative;
        .btn-vip {
            display: block;
            position: relative;
            cursor: pointer;
            position: relative;
            color: var(--main-color);
            border: 1px solid var(--main-color);
            border-radius: 14px;
            background: transparent;
            padding: 0 25px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 18px;
            letter-spacing: 1px;
            font-weight: 600;
        }   
        .vip-ad {
            display: block;
            color: #dfd4ba;
            position: absolute;
            left: 28px;
            bottom: 32px;
            padding: 0 4px;
            font-size: 10px;
            background-color: var(--main-color);
            border-radius: 4px;
            width: 72px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        } 
    }

   
}
.vip-open {
    background-color: #fbc642;

    .vip-content {

        .vip-top {

            .vip-text {
                color: var(--main-color);
            }
            .vip-little {
                color: var(--main-color);
            }
            
        }
        .vip-tip {
            color: var(--main-color);
        }

    }
    .btn-vip-container { 
        .btn-vip {
            color: var(--main-color);
            border-color: var(--main-color);
        }

    }
    
}

.system-title {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 14px;
}






.app-strategy {
    .strategy-box {
        height: calc(100vh - 150px);
        padding: 16px; 
        overflow-x: hidden;
        overflow-y: auto; 
        overflow: overlay;
        
        .strategy-title {
            font-weight: 600;
            font-size: 20px;
            display: flex;
            align-items: center;
            .van-switch {
                margin-left: 20px;
            }
        }
        .maincolor .van-cell__value {
            color: var(--main-color);
        }
        .van-cell-group {
            margin: 10px 0;
            padding: 10px 0;
        }
        .strategy-vip-main {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-top: 20px;
            
            .strategy-vip-right {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .is-close {
                    margin-right: 10px;
                }
            }
        }

        .strategy-close-tip{
            line-height: 18px;
            margin: 30px 0 10px;
            font-size: 12px;
        }



        .strategy-subtitle {
            font-size: 16px;
            margin-top: 20px;
            font-weight: 500;
        }
        .strategy-desc {
            margin-top: 8px;
            color: var(--van-cell-value-color);
            font-size: 14px;
            line-height: 20px;
        }
    
        .van-cell {
            padding: 0;
            margin-bottom: 10px;
            border: none;
            &::after {
                display: none;
            }
        }
        .van-cell__value {
            border-radius: 4px;
            .van-card__content{
                padding: 16px 10px;
            }
        }
        .filter-item {
            margin-top: 10px;
            &.bi-list span,.swipe-time {
                padding: 0 10px;
                border-radius: 14px;
                height: 28px;
                line-height: 26px;
                margin-right: 10px;
                display: inline-block;
                font-size: 14px;
                font-weight: 500;
                box-sizing: border-box;
                border: 1px solid #a9a9a9;
                background: transparent;
                color: #a9a9a9;
                &.select {
                    background: var(--main-color);
                    border-color: var(--main-color);
                    color: #fff;
                }
                
            }
            &.time-list {
                margin-bottom: 16px;
            }
            .swipe-time {
                padding: 0 10px;
            }
            
        } 
        .msg-item {
            background: #f7f8fa;
            padding: 16px;
            margin-bottom: 10px;
            font-size: 14px;
            border-radius: 8px;
            overflow: hidden;
            .item-title {
                font-weight: 600;
            }
        }
        
    }
    
    
    
    .strategy-footer {
        position: fixed;
        bottom: 0;
        left: 0;
    
        z-index: 99;
        width: 100%;
        height: 84px;
        background: #fff;
        text-align: center;
        padding: 0 16px;
        box-sizing: border-box;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
        .footer-tip {
            font-size: 12px;
            margin-bottom: 4px;
            font-weight: 500;
    
        }
        .footer-main {
            display: inline-block;
            width: 100%;
            .van-button {
                border-radius: 22px;
                padding: 0 30px;
                &:first-child {
                    margin-right: 20px;
                }
    
            }
            .van-button--plain {
                color: var(--main-color);
            }
        }
    }
}
.dialog-default {
    border-radius: 8px;
    background: radial-gradient(400px 70px at top 0 right 130px, #D6F9F7 0%, #E5F9F8 20%, rgba(255,255,255,0) 100%);
    background-color: #fff;
}
.privilege-dialog {
    width: 60%;
    border-radius: 8px;
    background: radial-gradient(400px 70px at top 0 right 130px, #D6F9F7 0%, #E5F9F8 20%, rgba(255,255,255,0) 100%);
    background-color: #fff;
    .van-dialog__content {
        padding: 20px 0;

        .know-text {
            color: #f86d40;
        }
    }
}


.setting-container {
    .setting-box {
        margin: var(--van-cell-group-inset-padding);
        border-radius: var(--van-cell-group-inset-radius);
        overflow: hidden;
        margin-bottom: 10px;
    }
    .setting-item {
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
        overflow: hidden;
        color: var(--van-cell-text-color);
        font-size: var(--van-cell-font-size);
        line-height: var(--van-cell-line-height);
        background: var(--van-cell-background);
        font-size: 13px;
        &::after {
            position: absolute;
            box-sizing: border-box;
            content: " ";
            pointer-events: none;
            right: var(--van-padding-md);
            bottom: 0;
            left: var(--van-padding-md);
            border-bottom: 1px solid var(--van-cell-border-color);
            transform: scaleY(.5);
        }
        .setting-all {
            display: flex;
            align-items: center;
        }
        .setting-left {
            width: 120px;
            font-weight: 500;
        }
        .setting-center {
            flex: 1;
        }
        .setting-right {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .switch-all {
            display: flex;
            align-items: center;
        }
    }
}
.setting-footer {
    padding: 0 16px;
    p {
        line-height: 18px;
        margin: 30px 0 10px;
        font-size: 12px;
    }
}

.global-tip {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    padding: 0 16px;
}
.maincolor {
    color: var(--main-color);
    cursor: pointer;
}


.app-header {
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.app-desc {
    margin-top: 8px;
    color: var(--van-cell-value-color);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
}
.padlr16 {
    padding: 0 16px;
}

.kefu-tip {
    font-size: 12px;
    color: #333;
    margin: 10px 0;
    text-align: center;
    .maincolor {
        font-weight: 500;
    }
}
.van-checkbox__icon .van-icon {
    border-radius: 4px!important;
}

.beian {
    position: fixed;
    bottom: 70px;
    width: 100%;
    text-align: center;
    left: 0;
    font-weight: 50;
    font-size: 12px;
}
.pc .beian {
    display: block!important;
}